
<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.common.tooltips.js" ></script>
    <script src="../libraries/RGraph.pie.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A Pie chart using gradients as colors</title>

    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="A Pie chart that uses Gradients as colours" />
     
</head>
<body>

    <h1>A Pie chart using gradients as colors</h1>

    <canvas id="cvs" width="400" height="300">[No canvas support]</canvas>
    
    <script>



        $(document).ready(function ()
        {



            function createGradient (obj, color)
            {
                return RGraph.radialGradient(obj, 200, 150, 95, 200, 150, 125, color, 'black')
            }



            /**
            * Because the pie object is going to be used in one of the options it must
            * be first created - and then we must use the set call to set the properties
            */
            var pie = new RGraph.Pie({
                id: 'cvs',
                data: [4,3,2,6,8],
            })
            
            pie.set({
                colors: [
                         createGradient(pie, '#ABD874'),
                         createGradient(pie, '#E18D87'),
                         createGradient(pie, '#599FD9'),
                         createGradient(pie, '#F4AD7C'),
                         createGradient(pie, '#D5BBE5')
                        ],
                shadow: {
                    offsetx: 5,
                    offsety: 5,
                    blur: 15,
                    color: '#bbb'
                },
                tooltips: ['Robert','Louise','Peter','Kevin','Jack'],
                labels: {
                    self: ['Robert','Louise','Peter','Kevin','Jack'],
                    sticks: {
                        self: true,
                        length: 15
                    }
                },
                radius: 100,
                strokestyle: 'rgba(0,0,0,0)'
            }).draw()
        })
    </script>

    <p>        
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>